import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:yurun_smartmerchants/res/colours.dart';
import 'package:yurun_smartmerchants/utils/app_size.dart';

class OffTheShelfPage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _OffTheShelfPageState();
  }

}

class _OffTheShelfPageState extends State<OffTheShelfPage>{
  bool selected = false;
  int currentIndex = 0;
  int count = 5;
  var goods = ['全部', '豆类', '白菜类', '豆制品', '叶菜', '果核类'];

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: CupertinoScrollbar(child: Container(
        color: Colours.app_background,
        child: Row(
          children: <Widget>[
            Container(
              color: Color(0Xffefefef),
              width: AppSize.width(157),
              child: ListView.builder(
                  itemCount: 6,
                  itemBuilder: (BuildContext context, int index) {
                    if (index == currentIndex) {
                      selected = true;
                    } else {
                      selected = false;
                    }
                    return _leftItem(index);
                  }),
            ),
            Container(
              width: AppSize.width(1),
              color: Color(0xffefefef),
            ),
            Expanded(
                child: Container(
                  color: Colors.white,
                  child: ListView.separated(
                      physics: BouncingScrollPhysics(),
                      itemBuilder: (BuildContext context, int index) {
                        return _rightItem(index);
                      },
                      separatorBuilder: (BuildContext context, int index) {
                        return Divider(
                          height: AppSize.height(1),
                          thickness: AppSize.height(1),
                          color: Color(0xffefefef),
                        );
                      },
                      itemCount: count),
                ))
          ],
        ),
      )),
    );
  }

  Widget _leftItem(index) {
    return GestureDetector(
      onTap: () {
        count = 5;
        setState(() {
          currentIndex = index;
          count += index;
        });
//        showToast('index:$index');
      },
      child: Container(
        height: AppSize.height(120),
        child: Row(
          children: <Widget>[
            Offstage(
              offstage: !selected,
              child: Container(
                color: Color(0xffdd4b39),
                width: AppSize.width(5),
              ),
            ),
            Expanded(
                child: Container(
                  alignment: Alignment.center,
                  color: selected ? Colours.white : Color(0Xffefefef),
                  child: Text(
                    goods[index],
                    style: TextStyle(
                        fontSize: AppSize.sp(28),
                        color: selected ? Color(0xffdd4b39) : Color(0xff626262)),
                  ),
                ))
          ],
        ),
      ),
    );
  }

  Widget _rightItem(index) {
    return Material(
      color: Colors.white,
      child: InkWell(
        onTap: () {

        },
        child: Container(
          height: AppSize.height(147),
          child: Row(
            children: <Widget>[
              Container(
                width: AppSize.height(147),
                padding: EdgeInsets.all(AppSize.height(15)),
                child: Image.network(
                  'https://imgwmmstestfort.epfresh.cn/2020%2F08%2F14%2F1597398833038_1597398833038.jpg',
                  fit: BoxFit.cover,
                ),
              ),
              Container(
                width: AppSize.width(170),
                alignment: Alignment.centerLeft,
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                        '药用果实',
                        style: TextStyle(fontSize: AppSize.sp(32), color: Colours.color_313131,),
                        overflow: TextOverflow.ellipsis,
                        maxLines: 1
                    ),
                    Container(
                      margin: EdgeInsets.only(top: AppSize.height(10),right: AppSize.width(5)),
                      padding: EdgeInsets.only(left: AppSize.width(5),right: AppSize.width(5),bottom: AppSize.height(2)),
                      decoration: ShapeDecoration(
                          color: Color(0xffefefef),
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.all(
                                  Radius.circular(AppSize.height(5))))),
                      child: Text('10公斤/散装',style: TextStyle(fontSize: AppSize.sp(24), color: Color(0xff434343)),overflow: TextOverflow.ellipsis,maxLines: 1,),
                    ),
                  ],
                ),
              ),
              Expanded(
                  child: Container(
                    height: AppSize.height(147),
                    alignment: Alignment.bottomLeft,
                    padding: EdgeInsets.only(bottom: AppSize.height(36)),
                    child: Row(
                      children: <Widget>[
                        ConstrainedBox(
                          constraints: BoxConstraints(
                            maxWidth: AppSize.width(180),
                          ),
                          child: Text('库存99999公斤',style: TextStyle(fontSize: AppSize.sp(26), color: Color(0xffeb3323)),overflow: TextOverflow.ellipsis,maxLines: 1,),
                        ),
                        Padding(padding: EdgeInsets.only(top: AppSize.height(2)),child: Icon(Icons.arrow_forward_ios,color: Color(0xffaaaaaa),size: AppSize.sp(26),),)
                      ],
                    ),
                  )),
            ],
          ),
        ),
      ),
    );
  }

}